<template>
  <div>
    <template v-for="(item, index) in formCofing">
      <slot :item="item">
        <el-form-item
          :key="forms+index"
          :prop="item.name"
          :hidden="item.hidden"
          :style="{'max-width':item.width}"
          :label="item.label"
          :rules="item.validate || null"
          class="form-item"
        >
          <template v-if="item.type == 'date'">
            <el-date-picker v-model="forms[item.name]" :disabled="item.disabled" format="yyyy 年 MM 月 dd 日" :value-format="item.format || 'yyyy-MM-dd'" type="date" :placeholder="placeholder(item.props)"></el-date-picker>
          </template>
          <template v-else-if="item.type === 'radio'">
            <el-radio
              v-for="opt in item.data"
              :key="'opt1'+opt.val"
              v-model="forms[item.prop]"
              :disabled="item.disabled"
              :label="opt.val"
            >{{ opt.label }}</el-radio>
          </template>
          <template v-else-if="item.type === 'cascader'">
            <el-cascader
              v-model="forms[item.prop]"
              :disabled="item.disabled"
              size="large"
              :options="item.data"
            >
            </el-cascader>
          </template>
          <template v-else-if="item.type === 'select'">
            <el-select v-model="forms[item.name]" :disabled="item.disabled" :placeholder="placeholder(item.props)">
              <el-option
                v-for="opt in item.data"
                :key="'opt'+opt.val"
                :label="opt.label"
                :value="opt.val"
              />
            </el-select>
          </template>
          <template v-else-if="item.type === 'specialType'">
            <el-input v-model="forms[item.name]" :disabled="item.disabled" :readonly="item.readonly" :type="'text'" :rows="item.rows" resize="none" :placeholder="placeholder(item.props)" />
            <template v-if="item.isEdit"><el-button @click="handleSpecial(item, index)">编辑</el-button></template>
          </template>
          <template v-else>
            <el-input v-model="forms[item.name]" :disabled="item.disabled" :readonly="item.readonly" :type="item.type || 'text'" :rows="item.rows" resize="none" :placeholder="placeholder(item.props)" />
          </template>
        </el-form-item>
      </slot>
    </template>
  </div>

</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    formCofing: {
      type: Array,
      default: _ => []
    },
    forms: {
      type: Object,
      default: _ => {}
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    placeholder(props) {
      return props && props.placeholder || ''
    },
    handleSpecial(item, index) {
      this.$emit('handleSpecial', item, index)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  display: flex;
  div {
    flex: 1;
  }
  button {
    margin-left: 6px !important;
  }
}
</style>
